<script setup>
import { ref, reactive, onMounted } from'vue';
import { wareSkuListApi, updateWareSkuStockApi } from '@/apis/wms/wareSku.js';
import { Search, EditPen } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';

const params = reactive({
  skuName:'',
  skuId:'',
  page:1,
  pageSize:10,
})

const loading = ref(false)

// const wareAllData = ref([])
// const getWareAll = async() => {
//   const res = await getWareAllApi();
//   wareAllData.value = res.data;
// }

const wareSku = ref({})
const wareSkuList = async() => {
  loading.value = true
  const res = await wareSkuListApi(params);
  wareSku.value = res.data;
  loading.value = false
}

const dialogVisible = ref(false)
let title = ''
const form = ref({})
const handleUpdateStock = (id) => {
  dialogVisible.value = true
  title = '修改库存'
  form.value.skuId = id
  form.value.stock = 0
}

// 确定
const handleConfirm = () => {
  updateWareSkuStockApi(form.value).then(res => {
    if(res.code === 0){
      ElMessage({
          type: 'success',
          message: '修改成功',
        })
        dialogVisible.value = false
        wareSkuList()
    }
  })
}

const disabled = ref(false)
const background = ref(false)

const handleSizeChange = (val) => {
    params.pageSize = val;
    params.page = 1;
    roleList()
}
const handleCurrentChange = (val) => {
    params.page = val;
    roleList()
}

// 搜索
const handleQuery = () => {
  wareSkuList()
}

// 重置
const handleRefresh = () => {
  params.skuId = '';
  params.wareId = '';
  params.pageNum = 1;
  params.pageSize = 10;
}

const route = useRoute()
onMounted(()=>{
  if(route.query.skuId){
    params.skuId = route.query.skuId;
  }
  wareSkuList();
})
</script>

<template>
  <div class="container" v-loading="loading">
    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <!-- <span style="display: inline-block;width: 45px;">仓库</span>
        <el-select v-model="params.wareId" clearable placeholder="Select">
          <el-option
            v-for="item in wareAllData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select> -->
        <span style="display: inline-block;width: 50px;margin-left: 10px;">skuId</span>
        <el-input v-model="params.skuId" placeholder="请输入skuId" clearable style="width: 240px;" />
        <span style="display: inline-block;width: 60px;margin-left: 10px;">sku标题</span>
        <el-input v-model="params.skuName" placeholder="请输入sku标题" clearable style="width: 240px;" />
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleQuery">搜索</el-button>
        <el-button @click="handleRefresh">重置</el-button>
      </el-col>
    </el-row>

    <!-- <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <el-button type="primary" plain @click="handleAddOrUpdate(null)">添加库存</el-button>
      </el-col>
    </el-row> -->

    <el-row>
      <el-col :span="24">
        <el-table :data="wareSku.list" border style="width: 100%">
          <el-table-column prop="skuId" label="skuId" align="center" />
          <el-table-column prop="skuName" label="sku标题" align="center" />
          <el-table-column prop="stock" label="库存数" align="center" />
          <el-table-column prop="stockLocked" label="锁库存数" align="center" />
          <el-table-column label="操作" width="250" align="center">
            <template v-slot="scope">
              <el-button type="primary" text size="small" :icon="EditPen"
                @click="handleUpdateStock(scope.row.id)">修改库存</el-button>
              <!-- <el-button type="primary" :icon="EditPen" circle @click="handleAddOrUpdate(scope.row.id)" />
              <el-button type="danger" :icon="Delete" circle style="margin-left: 20px;"
                @click="handleRemove(scope.row.id)" /> -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <div class="pageination">
            <el-pagination
                v-model:current-page="wareSku.page"
                v-model:page-size="wareSku.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="wareSku.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

    <el-dialog v-model="dialogVisible" :title="title" style="width: 35%;">
      <el-form style="width: 96%;" :model="form" status-icon label-width="80px">
        <el-form-item label="库存数" prop="name">
          <el-input-number v-model="form.stock" autocomplete="off" :min="0" :step="1" style="width: 100%;"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
    </el-dialog>


  </div>
</template>

<style scoped lang='scss'>

</style>